<template>
  <div class="list-box flex-1 overflow-auto">
    <div
      class="list"
      v-for="item in data"
      :key="item.id"
      @click="$emit('view', item)"
    >
      <div class="herder" v-if="item.todoType != 4">
        <div class="tabs">
          <div class="key" :class="_filterTodoTypeCss(item.todoType)">
            {{ item.todoType | filterTodoType }}
          </div>
          <div
            class="title"
            v-if="
              item.createUserId == item.userId && item.userId == item.signUserId
            "
          >
            由自己创建
          </div>
          <div
            class="title"
            v-else-if="
              item.createUserId == item.userId && item.userId != item.signUserId
            "
          >
            由{{ item.createUsername }}创建
          </div>
          <div
            class="title"
            v-else-if="
              item.createUserld != item.userId && item.userId == item.signUserId
            "
          >
            由{{ item.createUsername }}指派给我
          </div>
          <div
            class="title"
            v-else-if="
              item.createUserld != item.userId && item.userId != item.signUserId
            "
          >
            {{ item.createUsername }} 指派 {{ item.username }}
          </div>
        </div>
        <div class="right-icon" :class="_filterStatusCss(item.status)">
          {{ _filterStatus(item.status) }}
        </div>
      </div>
      <div class="rows" v-if="item.todoType != 4">
        <!-- 商机名称 -->
        <div class="infos" v-if="item.status != 50 && item.todoType != 3">
          <div class="lable">商机名称</div>
          <div class="vlaue">{{ item.name }}</div>
        </div>
        <!-- 商机状态 -->
        <div class="infos" v-if="item.status != 50 && item.todoType != 3">
          <div class="lable">商机状态</div>
          <div class="vlaue">{{ item.businessOpportunityStatusStr }}</div>
        </div>
        <!-- 扫街地址 -->
        <div class="infos" v-if="item.status == 50">
          <div class="lable">扫街地址</div>
          <div class="vlaue">{{ item.address }}</div>
        </div>
        <!-- 拜访地址 -->
        <div class="infos" v-if="item.status != 50">
          <div class="lable">拜访地址</div>
          <div class="vlaue">{{ item.address }}</div>
        </div>
        <!-- 外出时间 -->
        <div class="infos" v-if="item.outTime">
          <div class="lable">外出时间</div>
          <div class="vlaue">{{ item.outTime }}</div>
        </div>
        <!-- 签到 -->
        <div class="infos" v-if="_signIn(item.status)">
          <div class="lable"><span class="widen">签&emsp;&emsp;到</span></div>
          <div class="vlaue">
            <div>{{ item.clockOnTime }}</div>
            <div class="mt-5px">{{ item.clockOnAddress }}</div>
          </div>
        </div>
        <!-- 签出 -->
        <div class="infos" v-if="_signOff(item.status)">
          <div class="lable"><span class="widen">签&emsp;&emsp;出</span></div>
          <div class="vlaue">
            <div>{{ item.clockOutTime }}</div>
            <div class="flex mt-5px items-center">
              <p class="flex-1">{{ item.clockOutAddress }}</p>
              <p
                v-if="item.clockOutStatus == 20"
                class="adderss ml-6px mr-14px"
              >
                异地
              </p>
            </div>
          </div>
        </div>
        <!-- 预计拜访日期 -->
        <div class="infos" v-if="item.status == 10 || item.status == 70">
          <div class="lable lable-90">预计拜访</div>
          <div class="vlaue">{{ item.expectTodoDate }}</div>
        </div>
        <div class="infos" v-if="item.status == 70">
          <div class="lable">取消原因</div>
          <div class="vlaue">{{ item.cancelReason }}</div>
        </div>
      </div>
      <!-- BD -->
      <template
        v-if="
          (item.isLeader == 1 &&
            item.todoType != 4 &&
            item.createUserId == item.userId &&
            item.userId == item.signUserId) ||
          (item.createUserld != item.userId && item.userId == item.signUserId)
        "
      >
        <!-- 单个按钮 -->
        <div class="botton botton-one" v-if="_getTodoActions(item).length == 1">
          <div
            class="submit"
            @click.stop="$emit(_getTodoActions(item)[0].eventName, item)"
          >
            {{ _getTodoActions(item)[0].text }}
          </div>
        </div>
        <!-- 俩个按钮 -->
        <div class="botton botton-two" v-if="_getTodoActions(item).length == 2">
          <div
            class="submit"
            @click.stop="$emit(_getTodoActions(item)[0].eventName, item)"
          >
            {{ _getTodoActions(item)[0].text }}
          </div>
          <div class="btn-line"></div>
          <div
            class="submit"
            @click.stop="$emit(_getTodoActions(item)[1].eventName, item)"
          >
            {{ _getTodoActions(item)[1].text }}
          </div>
        </div>
        <!-- 三个按钮  -->
        <div
          class="botton botton-three"
          v-if="_getTodoActions(item).length == 3"
        >
          <div
            class="submit"
            @click.stop="$emit(_getTodoActions(item)[0].eventName, item)"
          >
            {{ _getTodoActions(item)[0].text }}
          </div>
          <div class="btn-line"></div>
          <div
            class="submit"
            @click.stop="$emit(_getTodoActions(item)[1].eventName, item)"
          >
            {{ _getTodoActions(item)[1].text }}
          </div>
          <div class="btn-line"></div>
          <div
            class="submit"
            @click.stop="$emit(_getTodoActions(item)[2].eventName, item)"
          >
            {{ _getTodoActions(item)[2].text }}
          </div>
        </div>
      </template>
      <!-- 其他人 -->
      <template
        v-if="
          item.isLeader != 0 &&
          item.todoType != 4 &&
          item.createUserld != item.userId &&
          item.userId != item.signUserId
        "
      >
        <div class="botton botton-one">
          <div class="submit" @click="$emit('view', item)">详情</div>
        </div>
      </template>
      <!-- 集团领导 -->
      <template v-if="item.isLeader == 0 && item.todoType != 4">
        <div class="botton botton-one">
          <div class="submit" @click="$emit('view', item)">详情</div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { TODO_STATUS } from "@/constants";
export default {
  props: {
    data: {
      type: Array,
    },
  },
  filters: {
    filterTodoType(value) {
      switch (value) {
        case 1:
          return "拜访";
        case 2:
          return "回访";
        case 3:
          return "扫街";
        case 4:
          return "";
      }
    },
  },
  methods: {
    _filterStatus(status) {
      const [statusItem] = TODO_STATUS.filter(({ key }) => key === status);
      return statusItem.text;
    },
    _filterStatusCss(status) {
      // 10待申请(新增)；20待审核；30已驳回；40待签到(审批通过)；41待签退；50待跟进(已签退)；60已完成(已跟进)；70已取消
      switch (status) {
        case 10:
        case 20:
        case 40:
        case 41:
        case 50:
          return "icon_warn";
        case 30:
          return "icon_error";
        case 60:
          return "icon_success";
        case 70:
          return "icon_info";
      }
      console.log(status);
    },
    _filterTodoTypeCss(value) {
      switch (value) {
        case 1:
        case 3:
          return "key-warn";
        case 2:
          return "key-su";
      }
    },
    _signIn(status) {
      if (status === 41 || status === 50 || status === 60) {
        return true;
      } else {
        return false;
      }
    },
    _signOff(status) {
      if (status === 41 || status === 50 || status === 60) {
        return true;
      } else {
        return false;
      }
    },
    _getTodoActions(item) {
      const { status } = item;
      if (status === 10) {
        // 待申请
        return [
          { text: "取消外出", eventName: "cancel" },
          { text: "外出申请", eventName: "apply" },
          { text: "详情", eventName: "view" },
        ];
      } else if (status === 20) {
        // 待审核
        return [{ text: "详情", eventName: "view" }];
      } else if (status === 30) {
        // 已驳回
        return [{ text: "详情", eventName: "view" }];
      } else if (status === 40) {
        // 待签到
        return [
          { text: "取消外出", eventName: "cancel" },
          { text: "签到", eventName: "clock-in" },
          { text: "详情", eventName: "view" },
        ];
      } else if (status === 41) {
        // 待签出
        return [
          { text: "签出", eventName: "clock-out" },
          { text: "详情", eventName: "view" },
        ];
      } else if (status === 50) {
        // 待跟进
        return [
          { text: "跟进", eventName: "follow" },
          { text: "详情", eventName: "view" },
        ];
      } else if (status === 60) {
        // 已完成
        return [{ text: "详情", eventName: "view" }];
      } else if (status === 70) {
        // 已完成
        return [{ text: "详情", eventName: "view" }];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@mixin minxi-fontstyle($size, $weight, $color) {
  font-size: $size;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: $weight;
  color: $color;
}
@mixin flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
.list-box {
  .list {
    background: #ffffff;
    border-radius: 10px;
    margin: 12px 0;
    position: relative;
    .herder {
      .tabs {
        padding: 16px 0 0 12px;
        display: flex;
        .key {
          width: 32px;
          height: 20px;
          border-radius: 4px;
          @include flex;
          text-align: center;
          font-size: 11px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
        }
        .key-warn {
          color: #f5894e;
          background: rgba(245, 137, 78, 0.1);
        }
        .key-su {
          color: #57ae59;
          background: rgba(87, 174, 89, 0.1);
        }
        .title {
          flex: 1;
          @include minxi-fontstyle(16px, 500, #333333);
          line-height: 22px;
          margin-left: 4px;
          font-family: PingFangSC-Medium, PingFang SC;
        }
      }
      .right-icon {
        width: 46px;
        height: 21px;
        position: absolute;
        right: 0;
        top: 0;
        @include minxi-fontstyle(10px, 500, #fff);
        line-height: 21px;
        text-align: center;
      }
      .icon_info {
        background: url("@/assets/workbench/goout/tab_info.png") no-repeat;
        background-size: 46px 21px;
      }
      .icon_warn {
        background: url("@/assets/workbench/goout/tab_warn.png") no-repeat;
        background-size: 46px 21px;
      }
      .icon_success {
        background: url("@/assets/workbench/goout/tab_success.png") no-repeat;
        background-size: 46px 21px;
      }
      .icon_error {
        background: url("@/assets/workbench/goout/tab_error.png") no-repeat;
        background-size: 46px 21px;
      }
    }
    .rows {
      .infos {
        display: flex;
        padding: 12px 10px 0 10px;
        .lable {
          @include minxi-fontstyle(13px, 400, #666666);
          width: 65px;
          text-align: left;
          white-space: nowrap;
        }

        .lable::after {
          content: "：";
        }
        .vlaue {
          flex: 1;
          word-break: break-all;
          @include minxi-fontstyle(13px, 400, #333);
        }
        .widen {
          width: 52px;
          display: inline-block;
          text-align-last: justify;
        }
        .adderss {
          width: 38px;
          height: 20px;
          background: #ffe6e6;
          border-radius: 6px;
          border: 1px solid #f55f4e;
          font-size: 11px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #f55f4e;
          text-align: center;
          @include flex;
        }
      }
    }

    .botton {
      margin-top: 14px;
      border-top: 1px solid #eeeeee;
      height: 52px;
      background: #fff;
      border-radius: 0px 0px 10px 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      .submit {
        border-radius: 10px;
        padding: 0 14px;
        @include minxi-fontstyle(14px, 500, #1d6fe9);
        text-align: center;
      }
      .btn-line {
        content: "";
        width: 1px;
        height: 20px;
        background-color: #f5f5f5;
      }
    }
    .botton-one,
    .botton-two,
    .botton-three {
      .submit {
        width: 100%;
      }
    }
    .botton-one {
      .submit {
        width: 100%;
      }
    }
    .botton-two {
      .submit {
        width: 50%;
      }
    }
    .botton-three {
      .submit {
        width: 33.1%;
      }
    }
  }
}
</style>
